import { Modal, Table, Form } from 'com';
import { Button, Space } from 'antd';
import { SearchSelector } from 'api/course_list';
import { getSubjects } from 'api/dictionary';
import { useEffect, useState, useMemo, useRef, useImperativeHandle, forwardRef } from 'react';
import menuStore from 'store/menu';
import dayjs from 'dayjs';

/**
 * 课程列表
 */
export default forwardRef((props, ref) => {
    const { onFinish, isSelf } = props;
    /**
     * 课程列表
     */
    const [list, setList] = useState([]);
    /**
     * loading
     */
    const [loading, setLoading] = useState(false);
    /**
     * 总条数
     */
    const [total, setTotal] = useState(0);
    /**
     * Modal引用
     */
    const modal = useRef();
    /**
     * 搜索模型
     */
    const [searchModel, setSearchModel] = useState({
        pageNo: 1,
        pageSize: 10,
        subject_id: 0,
        isSelf
    });
    /**
     * 科目列表
     */
    const [subjects, setSubjects] = useState([{ label: '所有', value: 0 }]);
    /**
    * 搜索表单配置项
    */
    const options = useMemo(() => ({
        class_id: {
            title: '班级',
            tag: 'cs',
            style: { width: 100 },
            clear: true
        },
        ...(isSelf ? null : {
            teacher_id: {
                title: '教师',
                tag: 'ts',
                style: { width: 130 },
                clear: true
            },
        }),
        subject_id: {
            title: '科目',
            tag: 'select',
            values: subjects
        },
        from_date: {
            title: '开始时间',
            tag: 'date',
            style: { width: 190 },
            attrs: { showTime: true }
        },
        end_date: {
            tag: 'date',
            style: { width: 190 },
            attrs: { showTime: true }
        },
        search: {
            tag: 'button',
            text: '搜索',
            htmlType: 'submit',
            type: 'primary'
        }
    }), [subjects]);
    /**
     * 列
     */
    const cols = [
        {
            title: '班级',
            dataIndex: 'class_name',
            align: 'center'
        },
        {
            title: '科目',
            dataIndex: 'subject_name',
            align: 'center'
        },
        {
            title: '教师',
            dataIndex: 'teacher_name',
            align: 'center'
        },
        {
            title: '开始时间',
            dataIndex: 'from_date',
            align: 'center',
            render: text => dayjs(text).format('YYYY-MM-DD HH:mm:ss')
        },
        {
            title: '结束时间',
            dataIndex: 'end_date',
            align: 'center',
            render: text => dayjs(text).format('YYYY-MM-DD HH:mm:ss')
        },
        {
            title: '状态',
            dataIndex: 'status',
            align: 'center'
        },
        {
            title: '操作',
            align: 'center',
            width: 150,
            render: (text, row) => <Space>
                <Button type="link" size="small" onClick={() => {
                    onFinish({ ...row });
                    modal.current.hide();
                }}>选择</Button>
            </Space>
        }
    ]

    useEffect(() => {
        if (menuStore.auth('classList')) {
            /**
            * 搜索
            */
            const searchList = async () => {
                try {
                    const { from_date, end_date, ...rest } = searchModel;
                    const { data, total } = await SearchSelector({ ...rest, from_date: from_date && dayjs(from_date).format('YYYY-MM-DD HH:mm:ss'), end_date: end_date && dayjs(end_date).format('YYYY-MM-DD HH:mm:ss') });
                    setList(data);
                    setTotal(total);
                } catch (error) { }
                setLoading(false);
            }
            searchList();
        }
    }, [searchModel]);

    useEffect(() => {
        if (menuStore.auth('classList')) {
            const getList = async () => {
                try {
                    const list = await getSubjects();
                    setSubjects([...subjects, ...list.map(c => ({ label: c.name, value: c.id }))]);
                } catch (error) { }
            }
            getList();
        }
    }, []);

    useImperativeHandle(ref, () => ({
        ...modal.current
    }));

    return <Modal title="选择课程" width={1200} attrs={{ footer: null }} ref={modal}>
        {menuStore.auth('classList') && <Form values={searchModel} options={options} attrs={{ layout: 'inline' }} onFinish={value => setSearchModel({ ...searchModel, ...value, pageNo: 1 })}></Form>}
        <p></p>
        {menuStore.auth('classList') && <Table cols={cols} data={list} loading={loading} page={searchModel} total={total} onChange={setSearchModel}></Table>}
    </Modal>
})